<template>
	<view class="container">
		<search2 :keyword="keyword" bgColor="rgba(187,187,187,0.3)" @click="shiftGoods"></search2>
		<!-- tabs标签 -->
		<view class="tabs-container">
			<up-tabs :list="list" @click="click" :inactiveStyle="{ color: '#606266', transform: 'scale(1)' }"
				:activeStyle="{ color: '#303133', fontWeight: 'bold', transform: 'scale(1.05)' }"
				itemStyle="height: 2rem; width:100%" lineColor="#303133" lineWidth="60"
				style="background-color: #EAB3B8; border-radius: 0.63rem 0.63rem 0 0;"/>
			<view class="tabs-bottom"></view>
		</view>
		<!-- 商品网格 -->
		<scroll-view scroll-y class="product-grid">
			<view v-show="tabsIndex === 0">
				<productCard :rightProducts="rightProducts" :leftProducts="leftProducts"
				@productClick="handleProductClick"></productCard>
			</view>
			<view v-show="tabsIndex === 1">
				<hot :hotProducts="products"></hot>
			</view>
			<view v-show="tabsIndex === 2">2</view>
		</scroll-view>
		
		<CustomTabBar />
	</view>
</template>

<script setup lang="ts">
	import { ref, computed } from 'vue'
	import { useI18n } from 'vue-i18n'
	import{Product} from '../../types/types'
	
	import CustomTabBar from '@/components/CustomTabBar.vue';
	import search2 from '@/pages/home/components/search2.vue'
	import productCard from '@/pages/home/components/productCard.vue'
	import hot from '@/pages/home/components/hot.vue'
	type tabListItemType = {
		name : string,
		badge?:object
	}
	const { t } = useI18n()
	const tabsIndex = ref<number>(0)
	const list = ref<Array<tabListItemType>>([
		{ name: t('home.tabs.item1') },
		{ name: t('home.tabs.item2') },
		{ name: t('home.tabs.item3'),badge: { value: 3 }},
	])
	const keyword = ref('')
	const products = ref<Product[]>([
		{
			id:1,
			image: '/static/img/like1.jpg',
			storeName: 'Baby Three',
			likes: 888,
			desc: '小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱121313衣橱'
		},
		{
			id:2,
			image: '/static/img/like2.jpg',
			storeName: 'Baby Three',
			likes: 222,
			desc: '小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱衣橱'
		},
		{
			id:3,
			image: '/static/img/like1.jpg',
			storeName: 'Baby Three',
			likes: 321,
			desc: '小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱衣橱'
		},
		{
			id:4,
			image: '/static/img/like2.jpg',
			storeName: 'Baby Three',
			likes: 888,
			desc: '小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱衣橱'
		},
		{
			image: '/static/img/like1.jpg',
			storeName: 'Baby Three',
			likes: 34,
			desc: '小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱衣橱'
		},
		{
			image: '/static/img/like2.jpg',
			storeName: 'Baby Three',
			likes: 423,
			desc: '小猫衣橱小猫衣橱小猫衣'
		},
		{
			image: '/static/img/like1.jpg',
			storeName: 'Baby Three',
			likes: 888,
			desc: '小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱衣橱'
		},
		{
			image: '/static/img/like2.jpg',
			storeName: 'Baby Three',
			likes: 321,
			desc: '小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱衣橱'
		},
		{
			image: '/static/img/like2.jpg',
			storeName: 'Baby Three',
			likes: 888,
			desc: '小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱衣橱'
		},
		{
			image: '/static/img/like1.jpg',
			storeName: 'Baby Three',
			likes: 232,
			desc: '小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱衣橱'
		},
		{
			image: '/static/img/like2.jpg',
			storeName: 'Baby Three',
			likes: 33,
			desc: '小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱衣橱'
		},
		{
			image: '/static/img/like1.jpg',
			storeName: 'Baby Three',
			likes: 1,
			desc: '小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱衣橱'
		},
		{
			image: '/static/img/like2.jpg',
			storeName: 'Baby Three',
			likes: 888,
			desc: '小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱衣橱'
		},
		{
			image: '/static/img/like1.jpg',
			storeName: 'Baby Three',
			likes: 647,
			desc: '小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱衣橱'
		},
	])

	// 添加左右列数据计算
	const leftProducts = computed(() => {
		return products.value.filter((_, index) => index % 2 === 0)
	})

	const rightProducts = computed(() => {
		return products.value.filter((_, index) => index % 2 === 1)
	})
	function shiftGoods(){
		uni.navigateTo({
			url:'/pages/goods/goods'
		})
	}
	// 定义方法
	function click(item : any) {
		tabsIndex.value = item.index
	}
	// 处理子组件传递的事件
	const handleProductClick = (product: Product)=>{
		uni.navigateTo({
			url:`/pages/fullScreen/fullScreen?id=${product.id}` // 携带商品 id 跳转
		})
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		height: 5.31rem;
		background-image: url('/static/img/myBg.png');
		background-size: cover;
		background-repeat: no-repeat;
		padding: 0.5rem 0;
		position: relative;
		box-sizing: border-box;
		
		/* #ifdef MP-WEIXIN */
		padding: 2.8rem 0 0.5rem ;
		height: 6rem;
		/* #endif */
	}
	.tabs-container {
		position: relative;
		z-index: 10;
	}

	.tabs-bottom {
		position: relative;
		top: -0.1rem;
		width: 100%;
		height: 1.94rem;
		z-index: 22;
		background: linear-gradient(180deg, rgba(234, 179, 184, 1) 0%, rgba(234, 179, 179, 0) 100%);
	}

	.product-grid {
		height: calc(90vh - 3.75rem);
		// background-color: #55aaff;
		margin-top: -1.5rem;
	}

</style>